<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="change">
    {{message}}
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<div id="app">
    {{key}}<br>
    <button v-on:click="change">改变</button>
    <button @click="del">删除</button>


    <div v-bind:style="{color:col}">v-bind演示</div>
    <button @click="changeColor">改变样式</button>
</div>
<div id="app2">
    <div v-bind:class="{active:isActive}"
    style="width: 200px;height: 200px;text-align: center;line-height: 200px;">

        hello vue!!!
    </div>
</div>

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
    <div @click="click1">
        <div @click.stop="click2">
            click me
        </div>
    </div>
</div>
<!---->
<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reserverMessage">反转消息</button>
    <input v-model="message">
</div>


<div id="app6">
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    <div v-if="type ==='A'">
        A
    </div>
    <div v-else-if="type ==='B'">
        B
    </div>
    <div v-else-if="type ==='C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{value}}
    </li>
</ul>




<script>
    new Vue({
        el: '#change',
        data: {
            message: '页面加载于' + new Date().toLocaleDateString()
        }
    })

    var app = new Vue({
        el: '#app',
        data: {
            key: '小舟',
            col: "red"
        },
        methods: {
            change() {
                this.key = "xiaozhou"
            },
            del() {
                this.key = "";
            },
            changeColor() {
                this.col = "green";
            }
        }

    })

    new Vue({
        el: "#app2",
        data:{
            isActive:true
        }
    })


    /*条件与循环*/
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true,
        },
        methods: {
            click1: function () {
                console.log('click1--------');
            },
            click2: function () {
                console.log('click2=======');
            }
        }
    })

    new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reserverMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })


    var vm = new Vue({
        el: "#app6",
        data: {
            type: "",
            awesome: false
        }

    })
    vm.type = "C"



    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })




</script>

<style>
    .active{background: #FF0000;}
</style>
</body>
</html>